<template>
  <!--导航-->
  <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
  <script src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <!--创建一个bootstarp导航条-->
  <nav class="navbar navbar-default">
    <!--创建一个bootstrap全屏布局-->
    <div class="container-fluid">
      <!--创建一个bootstrapLOGO布局-->
      <!--注意:必须要创建navbar-header，把logo以及响应式按钮给包裹进去..否则..大家删除下navbar-header 缩小屏幕点击下拉菜单就知道了-->
      <div class="navbar-header">
        <div class="navbar-brand">
          <p class="logo">IT资讯</p>
        </div>
      </div>

      <div class="collapse navbar-collapse" id="navbar-gbtag">
        <ul class="nav navbar-nav">
          <li >
            <a href="">热门</a>
          </li>
          <li><a href="">头条</a></li>
          <li >
            <a href="">技术</a>
          </li>
          <li>
            <a href="">热门博客</a>
          </li>
          <li>
            <a href="">程序员客栈</a>
          </li>
        </ul><!--导航元素-->

        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="搜索" />
          </div><!--表单组-->
          <button type="submit" class="btn btn-default">搜索</button>
        </form><!--表单-->
      </div><!--导航布局-->
    </div><!--end 全屏布局-->
  </nav>
  <!--导航-->
</template>
<style>
  .navbar-default{
   width:98%;
    margin:0 auto;
  }
  .logo{
    font-size: 30px;
    color:  #1ab394;
  }
</style>
<script>
    export default{
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{

        }
    }
</script>
